var right1 = echarts.init(document.getElementById("right1"), 'infographic');
var right2 = echarts.init(document.getElementById("right2"), 'infographic');
var right3 = echarts.init(document.getElementById("right3"), 'infographic');
var mydata1 = [
	{name: "白洋淀书斋", value: [99.99, 97.89, 5.12, 17],url:'https://shop.kongfz.com/6713/'},
	{name: "合众书局", value: [99.96, 87.79, 31.98, 19],url:'https://shop.kongfz.com/3119/'},
	{name: "上海东方古旧书店○", value: [99.98, 93.81, 18.31, 20],url:'https://shop.kongfz.com/966/'},
	{name: "三闲书斋", value: [99.92, 95.58, 11.97, 15],url:'https://shop.kongfz.com/12727/'},
	{name: "群山书院", value: [99.88, 97.73, 6.73, 19],url:'https://shop.kongfz.com/1937/'},
];
var mydata2 = [
    {name: "捞书怪", value: [99.52, 93.03, 9.88, 4],url:'https://shop.kongfz.com/457799/'},
    {name: "才华有限", value: [99.66, 93.41, 9.69,1],url:'https://shop.kongfz.com/3669/'},
    {name: "旧书云旗舰店", value: [99.76, 90.98, 8.17],url:'https://shop.kongfz.com/464363/'},
    {name: "通雅轩古籍书店", value: [99.84, 94.66, 15.05,18],url:'https://shop.kongfz.com/654147/'},
    {name: "群山书院", value: [99.88, 97.73, 6.73,19],url:'https://shop.kongfz.com/233701/'}
];
var mydata3 = [
    {name: "永乐古籍", value: [100, 100, 22.74, 11], url: 'https://shop.kongfz.com/135353/'},
    {name: "莲开听禅的书摊", value: [100, 46.67, 41.13, 5], url: 'https://shop.kongfz.com/338507/'},
    {name: "匠尤的书摊", value: [100, 97.3, 28.95, 14], url: 'https://shop.kongfz.com/30489/'},
    {name: "线装古旧书拍卖专场的书摊", value: [99.92, 100, 6.95, 7], url: 'https://shop.kongfz.com/152989/'},
    {name: "书友_0320_880848的书摊", value: [99.32, 85, 7.5, 1], url: 'https://shop.kongfz.com/627513/'}
];	

var option1 = {
    title: {
        text: '星级排行榜前五店铺气泡图'
    },
	toolbox: {
		feature: {
			saveAsImage: {}, 
			dataView: { readOnly: false }, 
			restore: {}, 
		}
	},
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            var name = params.name;
            var value1 = params.value[0]  + '%'; // 好评率
            var value2 = params.value[1] + '%'; // 成功完成率
            var value3 = params.value[2] + '小时'; // 发货时间
            return `${name}<br/>`
                + `好评率: ${value1}<br/>`
                + `成功完成率: ${value2}<br/>`
                + `发货时间: ${value3}`;
        }
    },
    xAxis: {
        type: 'value',
        name: '好评率',
        min: 99.8,
        max: 100
    },
    yAxis: {
        type: 'value',
        name: '成功完成率',
        min: 87.79,
        max: 97.95
    },
    series: [{
        name: '店铺气泡图',
        type: 'scatter',
        symbolSize: function (data) {
            return data[2] * 2; // 基于发货时间调整大小
        },
        data: mydata1,
        label: {
            show: true,
            formatter: '{b}' // 显示气泡上的店铺名称
        },
        itemStyle: {
            color: function (params) {
                // 根据某个值来改变气泡颜色，这里以value4为例
                var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'];
                return colorList[params.dataIndex % colorList.length];
            }
        }
    }]
};

var option2 = {
    title: {
        text: '销量排行榜前五店铺气泡图'
    },
	toolbox: {
		feature: {
			saveAsImage: {}, 
			dataView: { readOnly: false }, 
			restore: {}, 
		}
	},
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            var name = params.name;
            var value1 = params.value[0]  + '%'; // 好评率，保留两位小数并转换为百分比
            var value2 = params.value[1] + '%'; // 成功完成率，保留两位小数并转换为百分比
            var value3 = params.value[2] + '小时'; // 发货时间，保留两位小数
            return `${name}<br/>`
                + `好评率: ${value1}<br/>`
                + `成功完成率: ${value2}<br/>`
                + `发货时间: ${value3}`;
        }
    },
    xAxis: {
        type: 'value',
        name: '好评率',
        min: 99.52,
        max: 100
    },
    yAxis: {
        type: 'value',
        name: '成功完成率',
        min: 42.86,
        max: 97.5
    },
    series: [{
        name: '店铺气泡图',
        type: 'scatter',
        symbolSize: function (data) {
            return data[2] * 2; // 基于发货时间调整大小
        },
        data: mydata2,
        label: {
            show: true,
            formatter: '{b}' // 显示气泡上的店铺名称
        },
        itemStyle: {
            color: function (params) {
                // 根据某个值来改变气泡颜色，这里以value4为例
                var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'];
                return colorList[params.dataIndex % colorList.length];
            }
        }
    }]
};

var option3 = {
    title: {
        text: '书摊排行榜前五书摊气泡图'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            var name = params.name;
            var value1 = params.value[0]  + '%'; // 好评率
            var value2 = params.value[1] + '%'; // 成功完成率
            var value3 = params.value[2] + '小时'; // 发货时间
            return `${name}<br/>`
                + `好评率: ${value1}<br/>`
                + `成功完成率: ${value2}<br/>`
                + `发货时间: ${value3}`;
        }
    },
	toolbox: {
		feature: {
			saveAsImage: {}, 
			dataView: { readOnly: false }, 
			restore: {}, 
		}
	},
    xAxis: {
        type: 'value',
        name: '好评率',
        min: 99.3,
        max: 100
    },
    yAxis: {
        type: 'value',
        name: '成功完成率',
        min: 46.67,
        max: 100
    },
    series: [{
        name: '店铺气泡图',
        type: 'scatter',
        symbolSize: function (data) {
            return data[2] *2; // 基于发货时间调整大小
        },
        data: mydata3,
        label: {
            show: true,
            formatter: '{b}' // 显示气泡上的店铺名称
        },
        itemStyle: {
            color: function (params) {
                // 根据某个值来改变气泡颜色，这里以value4为例
                var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'];
                return colorList[params.dataIndex % colorList.length];
            }
        }
    }]
};

// 设置图表选项
right1.setOption(option1);
right2.setOption(option2);
right3.setOption(option3);

right1.on('click', function (params) {
    if (params.seriesType === 'scatter' && params.componentType === 'series') {
        var url = params.data.url;
        if (url) {            
            window.open(url, '_blank'); 
        }
    }
});
right2.on('click', function (params) {
    if (params.seriesType === 'scatter' && params.componentType === 'series') {
        var url = params.data.url;
        if (url) {            
            window.open(url, '_blank'); 
        }
    }
});
right3.on('click', function (params) {
    if (params.seriesType === 'scatter' && params.componentType === 'series') {
        var url = params.data.url;
        if (url) {            
            window.open(url, '_blank'); 
        }
    }
});

